<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        #div1{
            width: 200px;
            height: 200px;
            background: skyblue;
            position: absolute;
        }
        .box{
            border: 1px dashed #999999;
            position: absolute;
        }
    </style>
</head>
<body>
<div id="div1"></div>

  <script>
      var oDiv = document.getElementById('div1');
      var disX = 0;
      var disY =0;
      oDiv.onmousedown = function (ev) {
         var oEvent = ev || event;
         disX = oEvent.clientX - oDiv.offsetLeft;
         disY = oEvent.clientY - oDiv.offsetTop;

         var oBox = document.createElement('div');

         oBox.className = 'box';
         oBox.style.width = oDiv.offsetWidth-2+'px';
         oBox.style.height = oDiv.offsetHeight-2+'px';


          oBox.style.left = oDiv.offsetLeft+'px';
          oBox.style.top = oDiv.offsetTop+'px';

          document.body.appendChild(oBox);


          document.onmousemove = function (ev) {//拖拽的行为发生在onmousedown里面
              var oEvent = ev || event;

              var left = oEvent.clientX-disX;
              var top = oEvent.clientY-disY;

              oBox.style.left =left +'px';
              oBox.style.top = top+'px';



          };
          document.onmouseup = function () {
              document.onmousemove= null;
              document.onmouseup = null;

              oDiv.style.left = oBox.offsetLeft+'px';
              oDiv.style.top = oBox.offsetTop+'px';

              document.body.removeChild(oBox);
          };

          return false;//阻止火狐的默认事件---鼠标按下的时候会自动创建一个新的div
      };
  </script>
</body>
</html>